<template>
  <div class="AudioModule">
    <div class="player" :class="[{ playing: playing }]" @click="onTogglePlay" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { AudioPlayer } from '@/audio'

const playing = ref(false)
const player = ref(
  new AudioPlayer({
    url: 'https://lagrang.oss-cn-hangzhou.aliyuncs.com/common-upload/111222233333.mp3',
    autoplay: true,
    loop: true,
    onPlay: () => {
      playing.value = true
    }
  })
)
const onTogglePlay = () => {
  if (playing.value) {
    player.value.pause()
    playing.value = false
  } else {
    player.value.play()
    playing.value = true
  }
}
</script>
<style lang="scss" scoped>
.AudioModule {
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .player {
    width: 80px;
    height: 80px;
    background: url('@/assets/images/music.png') no-repeat center center;
    background-size: 100%;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99;
    overflow: hidden;
    border-radius: 50%;
    transform: translateZ(0);

    &.playing {
      animation: rotate 5s linear infinite;
    }
  }
}
</style>
